<template>
	<view class="container">
		<view class="content">
			<view class="pic">
				<image :src="detailInfo.thumb" mode=""></image>
			</view>
			<view class="intro">
				<view class="productIntro">
					<view class="title">
						{{detailInfo.goods_name}}
					</view>
					<view class="jigou">
						{{detailInfo.shop_name}}
					</view>
					<view class="time">
						<image src="../../../static/img/shijian.png" mode=""></image>
						<text>上课时间:{{detailInfo.class_time}} </text>
					</view>
					<view class="date">
						<image src="../../../static/icon/shijian2.png" mode=""></image>
						<text>{{detailInfo.spec}}</text>
					</view>
					<view class="local">
						<image src="../../../static/img/dizhi.png" mode=""></image>
						<text>机构地址：{{detailInfo.address}}</text>
					</view>
				</view>
				<view class="teacherIntro">
					<view class="avatar">
						<image :src="detailInfo.contact_image" mode=""></image>
					</view>
					<view class="intro">
						<view class="teacherName">
							<text>{{detailInfo.contact_name}}</text>
						</view>
						<view class="dianhua">
							<text>{{detailInfo.contact_phone}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="introContainer">
			<view class="introTitle">
				课程
			</view>
			<view class="introContent">
				{{detailInfo.content}}
			</view>
			<view class="introTime">
				{{detailInfo.class_time}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				goods_id:'',
				detailInfo:"",
			}
		},
		onLoad: function(option) { 
			this.goods_id = option.goods_id;
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/index'
					});
				}
			});
		},
		methods:{
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/index/myGradeInfo`,
					data: {
						"token": this.token,
						goods_id:this.goods_id
					},
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							this.detailInfo = res.data.data;
							uni.hideLoading();
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		background: url(../../../static/img/topbg.png)no-repeat top left/100%;
		overflow: auto;
		margin-top: -2px;
	}
	.content{
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8px;
		margin: 20px auto;
		.productIntro{
			padding: 40rpx 24rpx 0 24rpx;
			box-sizing: border-box;
		}
		.pic{
			width: 672rpx;
			height: 354rpx;
			background: #D8D8D8;
			border-radius: 8px 8px 0px 0px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				border-radius: 8px 8px 0px 0px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: 500;
			color: #333333;
		}
		.jigou {
			display: inline-block;
			padding: 3px 4px 3px 5px;
			background: #FFFFFF;
			border-radius: 2px;
			border: 1px solid #66A8A0;
			font-size: 13px;
			font-weight: 400;
			color: #66A8A0;
			margin-top: 20rpx;
		}
		.date,.time,.local{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10rpx;
			image{
				width: 13px;
				height: 13px;
			}
			text{
				font-size: 13px;
				color: #666666;
				margin-left: 10rpx;
			}
		}
	}
	.teacherIntro {
		width: 626rpx;
		height: 118rpx;
		margin: 24rpx auto 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-top: 1px solid #E0E0E0;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
	
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
	
		.intro {
			width: 460rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			.teacherName {
				font-size: 30rpx;
				color: #666666;
			}
	
			.dianhua {
				font-size: 26rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}
	.introContainer{
		padding: 0 40rpx;
	}
	.introTitle{
		font-size: 17px;
		font-weight: 700;
		color: #333333;
		margin: 40rpx 0;
	}
	.introContent{
		font-size: 15px;
		color: #666666;
		line-height: 1.5;
	}
	.introTime{
		font-size: 13px;
		color: #999999;
		margin-top: 20rpx;
	}
</style>
